   <template>
   <div class="car-form-detailed">
       <c-form-block-container>
          <div class="content">

            <Row :gutter='20'>
                <Col :span='12'>
                
                        <div class="base-info">

                            <l-page-head :title='formatData.Did'>
                                <c-status-label  :val='statusConf'></c-status-label>
                            </l-page-head>

                            <div class="item">
                                <l-base-member :data='formatData'>
                                <div class='order-files' @click='uploadSwitch'>
                                        <h2 class="num">
                                            {{carUpFileLength}}
                                        </h2>
                                        <span>
                                            订单附件
                                        </span>
                                </div>
                                </l-base-member>
                                
                            </div>
                            
                            <div class="item">
                                <l-block-title :title='"人员信息"'></l-block-title>
                                <l-personal-list :data='formatData'></l-personal-list>
                            </div>

                            <div class="item">
                                 <l-block-title :title='"车辆信息"'></l-block-title>
                                <l-car-info :data='formatData'></l-car-info>
                            </div>
                            
                            <div class="item">
                                <l-block-title :title='"税务信息"'></l-block-title>
                                <l-car-tax :data='formatData'></l-car-tax>
                            </div>
                            
                        </div>
                
                </Col>

                <Col :span='12'>

                    <div class="dynamic-info">

                        <l-page-head :title='formatData.DEVjqViCompany || formatData.DEVsyViCompany'>
                            <div class='order-top-info'>
                                <c-form-readonly-block  v-for='(mod, index) of orderTopInfo' :label='mod.label' :data='formatData' :keys='mod.keys' :type='mod.type' :key='index'></c-form-readonly-block>
                            </div>
                        </l-page-head>

                        <div class="item">
                            <Row :gutter='10'>
                                <Col :span='mod.span' v-for='(mod, index) of orderListInfo' :key='index'>
                                    <l-list-block :title='mod.title' :mods='mod.mods' :data='formatData' :ste='mod.ste'></l-list-block>
                                </Col>
                            </Row>
                        </div>

                        <div class="item">
                            <l-block-title :title='"商险信息"'></l-block-title>
                            <l-sy-plan :chargingData='_chargingData' :planData='formatData["DEVsyRiskTable"]'></l-sy-plan>
                        </div>
                        
                    </div>

                </Col>
            </Row>
              
          </div>
       </c-form-block-container>
       
   </div>
</template>

<script lang='ts'>
import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
import stateStore from '@/components/ivew_conf/state_store.ts'
import carUpload from '@/components/form_tools/funs/car_upload'
import { deepCopy } from '@/utils/tools'
import jgType from '@/components/ivew_conf/jg_type.json'

import pageHead from './page_head.vue'
import baseMember from './base_member.vue'
import personalList from './personal_list.vue'
import carInfo from './car_info.vue'
import listBlock from './list_block.vue'
import syPlan from './sy_plan.vue'
import carTax from './car_tax.vue'
import blockTitle from './block_title.vue'

@Component({

    components: {

        'l-page-head': pageHead,
        'l-base-member': baseMember,
        'l-personal-list': personalList,
        'l-car-info': carInfo,
        'l-list-block': listBlock,
        'l-sy-plan': syPlan,
        'l-car-tax': carTax,
        'l-block-title': blockTitle
        
    }
    
})
export default class carFormDetailed extends Vue{
    name:string = 'car-form-detailed'

    carStateStore:any = new stateStore()
    
    @Prop()
    data

    @Prop()
    carUploadList: any[]

    @Prop()
    chargingData
    
    @Prop()
    hasKeys

    @Prop()
    chargingSelectedCompany


      // 转换交管类型
    get carInfoData(){

        let data = deepCopy(this.data);
       
        return  data
    }


    // 获取当前投保公司计费结果 (可能存在，计费结果中 无投保公司相关计费结果的情况)
    get _chargingData(){
        let _vue = this
        let chargingData = this.chargingData
        let company = _vue.chargingSelectedCompany['jqCompany'] || _vue.chargingSelectedCompany['syCompany']
        let data = {};

        chargingData.forEach(item =>{
            
            if(item.company === company){
                data = item
            }

        })

        return {
            
            hasKeys: _vue.hasKeys,
            data,
            
        }
    }
    
    get formatData(){
        let _vue = this;
        
        // 投保类型
        let hasSy = this.data['DEVpickJq'];
        this.data['DEVpickJq'] = hasSy ? "商业险" : '';

        let hasJq = this.data['DEVpickSy'];
        this.data['DEVpickSy'] = hasJq ?  '交强险' : '';
    
        // 起保日期
        this.data['DEVjqStartDate'] =  this.data['DEVjqStartDate'] || this.data['DEVsyStartDate'];

        // 保费合计
        this.data['SDtotal'] = 0
        let priceKeys = [ 'SDjqAmount', 'SDsyAmount', 'SDtaxAmount' ];
        
        priceKeys.forEach(key =>{
            _vue.data['SDtotal'] += _vue.data[key]
        })

        // 布尔值转换
        let booleanMap = [ 'DEVonBehalf', 'DEVisCommercialUsage', 'DEVisTransfered' ]
    
    
        booleanMap.forEach(key =>{
            let val = _vue.data[key];
            _vue.data[key] =  val ? '是' : '否'
        })
        

        // 交管类型转换
         let jgTypeStr = JSON.stringify(jgType);
        let DEVcategory = this.data['DEVcategory'][1];
        let position = jgTypeStr.indexOf(DEVcategory)

        let begingNum = jgTypeStr.lastIndexOf('label', position)
        let endNum = jgTypeStr.indexOf('",', begingNum)
        this.data['DEVcategory'] = jgTypeStr.substring(begingNum+8, endNum)
       
        return this.data
    }
   
    get carUpFileLength(){
        let num = 0;

        this.carUploadList.forEach(item =>{

            if(item.url){
                num += 1
            }
            
        })
    
        return num
    }
    
     
    get statusConf(){
        return this.carStateStore.getVal([this.data['Sstatus']])
    }


    orderListInfo = [

        {
            title:'保险单号',
            span: 12,
            ste: {
                background: '#0057ff',
                boxShadow: '0 22px 18px -18px #0057ff'
            },
            mods: [

                {
                    label: '交险投保单号',
                    key: 'SDjqAppNo'
                },
                {
                    label: '交险保单号',
                    key: 'SDjqPolicyNo'
                },
                {
                    label: '商险投保单号',
                    key: 'SDsyAppNo'
                },
                {
                    label: '商险保单号',
                    key: 'SDsyPolicyNo'
                },
               
                {
                    label: '支付号',
                    key: 'SDpayId'
                }
               
                
            ]
            
        },
        {
            title:'实际缴费',
            span: 12,
            ste: {
                background: '#fd820f',
                boxShadow: '0 22px 18px -18px #fd820f'
            },
            mods: [

                {
                    label: '交险保费',
                    key: 'SDjqAmount'
                },
                {
                    label: '商险保费',
                    key: 'SDsyAmount'
                },
                {
                    label: '车船税',
                    key: 'SDtaxAmount'
                },
                {
                    label: '',
                    key: ''
                },
                {
                    label: '合计',
                    key: 'SDtotal'
                },
               
                
            ]
            
        }
        
    ]
    

    orderTopInfo:formInf.formReadonly[] = [

        {
            label: '投保险种',
            type: 'inline',
            keys: [ 'DEVpickJq', 'DEVpickSy' ]
        },

        {
            label: '起保日期',
            type: 'inline',
            keys: ['DEVjqStartDate']
        }
        
    ]
    

    // 查看附件
    uploadSwitch (){
        // carUpload.fn({disabled:true})
        carUpload.fn()
    }
}

 
</script>

<style scoped lang='scss'>

.car-form-detailed{
    position: relative;
    
    .content{
        padding-bottom: _intervals(4);
    }
    .order-top-info{
        display: flex;
        align-items: center;

        &>div{
            margin: 0;
        }

        &>div + div{
            margin-left: _intervals();
        }

    }
    
    &::before{
        
        content: '';

        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        
        margin: auto;
        width: _rem(1.2px);
        height: 90%;
        border-left: _rem(1px) dashed $border_color;

        z-index: 99;
        
    }

    .item{
        margin-top: _intervals(2);
    }
    .item + .item{
        margin-top: _intervals(8);
        
    }
    
    .order-files{
        
        margin-top: _intervals(2);
        padding: _rem(6px);
        border-radius: $border_radius;
        text-align: center;
        transition: all $transition_time;
        cursor: default;
        
        &:hover{
            transform: translateY(-2px);
            box-shadow: $default_shadow;
        }

        .num{
            margin-bottom: _intervals();
            font-size: _rem(32px);
            color: $main_color;
        }

        

    }
}

</style>